﻿<%@ Page Title="" Language="C#" MasterPageFile="~/home-loan/Home_Loan.master" AutoEventWireup="true"
    CodeFile="home-loan.aspx.cs" Inherits="home_loan_home_loan" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<%@ Register Src="../controls/usrCompanyBigLogoByServices.ascx" TagName="usrCompanyBigLogoByServices"
    TagPrefix="uc4" %>
<%@ Register Src="~/controls/usrNoJS.ascx" TagName="usrNoJS" TagPrefix="ucNoJS" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script src="../controls/CE_Date.js" type="text/javascript"></script>
    <script src="../includes/ValidationError-NEW.js" type="text/javascript"></script>
    <script src="../includes/ValidationEffect-NEW.js" type="text/javascript"></script>
    <script src="../includes/LoadingProgress.js" type="text/javascript"></script>
    <asp:ScriptManager ID="ScriptManager" runat="server" AsyncPostBackTimeout="36000">
    </asp:ScriptManager>
    <div class="elements_inner_wrapper">
        <ucNoJS:usrNoJS ID="usrNoJS1" runat="server" />
        <!-- #Include file="../includes/body_loader.inc" -->

        <script type="text/javascript">
            IncreaseProgress(5);
        </script>

        <div id="divContent" style="display: none">
            <div class="rightcol">
                <!-- #Include file="../includes/rcol_partners_banks.aspx" -->
                <br />
                

                <div class="tip">
                    <div class="head">
                    </div>
                    <div class="body">
                        <h1>
                            Home Loans Resources</h1>

                        <div class="pad_10">
                            <p>
                                Work out how much you can borrow and how much it will cost?</p>
                                
                            <ul>
                                <li class="calc">
                                    <asp:HyperLink ID="imgbtnCalculator" runat="server" Text="Mortgage Calculator"></asp:HyperLink></li>
                                <!-- <li class="calc"><a href="#">Refinancing Calculator</a></li>
                                        <li class="calc"><a href="#">How much can I borrow?</a></li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="foot">
                    </div>
                </div>

<div class="seperator"></div>

            </div>
        </div>
        <div id="contentBody">
            <h1> Compare Home Loans</h1>
            <div class="seperator">
            </div>
            <div class="section">
                <fieldset>
                    <div class="row">
                        <asp:ValidationSummary ID="ValidationSummary1" HeaderText="Oops Please complete the form."
                            runat="server" ValidationGroup="homeloan" CssClass="errorSummary" />
                    </div>

                    <script type="text/javascript">
                        IncreaseProgress(25);
                    </script>

                    <div class="row">
                        <label class="mand_red">
                            Mortgage Type</label>
                        <div class="field">
                            <span class="indicator">
                                <asp:DropDownList ID="ddlMortgageType" onchange="CheckMortageType();" runat="server"
                                    class="text" Width="200">
                                    <asp:ListItem Selected="True" Value="-1">Select</asp:ListItem>
                                    <asp:ListItem Value="1">Refinancing</asp:ListItem>
                                    <asp:ListItem Value="2">New Loan</asp:ListItem>
                                </asp:DropDownList>
                            </span><span class="indicator">
                                <asp:RequiredFieldValidator ID="rfvMortgageType" InitialValue="-1" runat="server"
                                    ControlToValidate="ddlMortgageType" CssClass="validationErrorControl" ErrorMessage=""
                                    ValidationGroup="homeloan"></asp:RequiredFieldValidator>
                            </span><span class="formInfo1"><a href="/tooltips/mortage_type.htm?width=250" class="jTip"
                                id="one">
                                <img src="/images/icons/help.gif" alt="Help" style="vertical-align: middle;" /></a>
                            </span>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="row" id="divYourCurrentBank" style="display: none">
                        <label class="mand_red">
                            Your Current Bank</label>
                        <div class="field">
                            <span class="indicator">
                                <asp:DropDownList ID="ddlYourCurrentBank" runat="server" class="text" Width="200">
                                </asp:DropDownList>
                            </span><span class="indicator">
                                <asp:RequiredFieldValidator ID="rfvYourCurrentBank" InitialValue="-1" runat="server"
                                    ControlToValidate="ddlYourCurrentBank" CssClass="validationErrorControl" ErrorMessage=""
                                    ValidationGroup="homeloan"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="row">
                        <label class="mand_red">
                            Completed Property Type</label>
                        <div class="field">
                            <span class="indicator">
                                <asp:DropDownList ID="ddlPropertyType" runat="server" class="text" Width="200">
                                    <asp:ListItem Selected="True" Value="-1">Select</asp:ListItem>
                                    <asp:ListItem Value="1">HDB</asp:ListItem>
                                    <asp:ListItem Value="2">Private</asp:ListItem>
                                </asp:DropDownList>
                            </span><span class="indicator">
                                <asp:RequiredFieldValidator ID="rfvPropertyType" InitialValue="-1" runat="server"
                                    ControlToValidate="ddlPropertyType" CssClass="validationErrorControl" ErrorMessage=""
                                    ValidationGroup="homeloan"></asp:RequiredFieldValidator>
                            </span><span class="formInfo1"><a href="/tooltips/property_type1.htm?width=250" class="jTip"
                                id="two">
                                <img src="/images/icons/help.gif" alt="Help" style="vertical-align: middle;" /></a>
                            </span>
                        </div>
                        <div class="clear">
                        </div>
                    </div>

                    <script type="text/javascript">
                        IncreaseProgress(45);
                    </script>
                    <div class="row">
                        <label class="mand_red">
                            Loan Amount
                        </label>
                        <div class="field">
                            <span class="indicator">S$ &nbsp;</span><span class="indicator">
                                <asp:TextBox ID="txtLoanAmount" onkeyup="formatThousandNumber(this.value);" runat="server"
                                    class="text" MaxLength="7" Width="165"></asp:TextBox></span><span class="indicator">
                                        <asp:RequiredFieldValidator ID="rfvLoanAmount" runat="server" ControlToValidate="txtLoanAmount"
                                            Display="Dynamic" CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="homeloan"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revLoanAmount" runat="server" ControlToValidate="txtLoanAmount"
                                            CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="homeloan"
                                            ValidationExpression="^[0-9]{6,7}" Display="Dynamic"></asp:RegularExpressionValidator>
                                        <asp:RangeValidator ID="rvLoanAmount" runat="server" ControlToValidate="txtLoanAmount"
                                            MaximumValue="5000000" MinimumValue="100000" Type="Integer" Display="Dynamic"
                                            CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="homeloan"></asp:RangeValidator>
                                    </span><span class="formInfo1"><a href="/tooltips/loan_amount.htm?width=250" class="jTip"
                                        id="four">
                                        <img src="/images/icons/help.gif" alt="Help" style="vertical-align: middle;" /></a>
                                        <asp:Label runat="server" ID="lblLoanAmountDisplay" Font-Bold="true" /></span>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="row">
                        <label class="mand_red">
                            Loan Duration</label>
                        <div class="field">
                            <span class="indicator">

                                <ajaxtoolkit:SliderExtender ID="sldLoanTenure" runat="server" BehaviorID="ddlLoanTenure"
                                    TargetControlID="txtLoanTenure" BoundControlID="lblLoanTenure_BoundControl" Orientation="Horizontal"
                                    EnableHandleAnimation="true" Minimum="5" Maximum="30" Length="200" TooltipText="{0} years" />
                                <asp:TextBox ID="txtLoanTenure" runat="server" Style="right: 0px" Text="0" />
                                <asp:Label ID="lblLoanTenure_BoundControl" runat="server" />
                                years </span>
                            <span class="formInfo1"><a href="/tooltips/loan_duration.htm?width=250" class="jTip"
                                id="A2">
                                <img src="/images/icons/help.gif" alt="Help" style="vertical-align: middle;" /></a>
                            </span>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    <script type="text/javascript">
                        IncreaseProgress(80);
                    </script>

                </fieldset>
                <div class="formButtons_new">
                    <span class="button2 right">
                        <asp:Button runat="server" ID="btnNext" onmousedown="this.className = 'button_submit_mousedown';"
                            onmouseup="this.className = 'button_submit';" onmouseout="this.className = 'button_submit';"
                            CssClass="button_submit" ValidationGroup="travel_insurance" OnClientClick="CheckValidationCurrentBank();LoadValidationErrorCss();CheckOptionValidationCss();if (Page_ClientValidate('homeloan')){this.removeAttribute('onmouseout');this.removeAttribute('onmouseup');this.className = 'button_processing';}"
                            OnClick="ibtNext" />
                    </span>
                </div>
                <div class="clear">
                </div>

                <!--CONTENT HERE -->
            </div>
            <div class="clear"></div>
        </div>
    </div>
        
 
    <ajaxtoolkit:ModalPopupExtender ID="mpeCalculator" runat="server" TargetControlID="imgbtnCalculator"
        PopupControlID="pnlCalculator" BackgroundCssClass="modalBackground" DropShadow="true"
        CancelControlID="btnClose">
    </ajaxtoolkit:ModalPopupExtender>
    <asp:Panel ID="pnlCalculator" runat="server" Style="display: none; background-color: White;">
        <asp:UpdatePanel ID="upCalculator" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="sr_wrapper_travel" style="width: 770px; padding: 20px; border: 9px solid #3b3b3b;
                    overflow: visible; height: auto;">
                    <div class="sr_content_cal">
                        <div class="s_bubble">
                            <p>
                                <br />
                                <br />
                                Want to know how much
                                <br />
                                your monthly payment will
                                <br />
                                be for a particular mortgage?
                                <br />
                                Simply fill in the boxes
                                <br />
                                to find out.
                            </p>
                        </div>
                        <div class="sr_form">
                            <h1>
                                Mortgage Calculator</h1>
                            <div class="row pad_10b">
                                <asp:ValidationSummary ID="vsCalculator" runat="server" ValidationGroup="calculator"
                                    ShowSummary="True" CssClass="errorSummary" HeaderText="Oops... Please complete the form">
                                </asp:ValidationSummary>
                            </div>

                            <script type="text/javascript">
                                IncreaseProgress(25);
                            </script>

                            <div class="f_row">
                                <span class="form_l cash_ico">Loan Amount</span>
                                <div class="f_field">
                                    <asp:TextBox ID="txtCalLoanAmount" runat="server" class="text" Width="150" MaxLength="10"></asp:TextBox>
                                    <span class="indicator">
                                        <asp:RequiredFieldValidator ID="rfvCalLoanAmount" runat="server" ControlToValidate="txtCalLoanAmount"
                                            Display="Dynamic" CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revCalLoanAmount" runat="server" ControlToValidate="txtCalLoanAmount"
                                            CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"
                                            ValidationExpression="^[0-9]+(\.[0-9]{1,2})?$"></asp:RegularExpressionValidator>
                                    </span>
                                </div>
                                <div class="clear">
                                </div>
                            </div>

                            <script type="text/javascript">
                                IncreaseProgress(80);
                            </script>

                            <div class="f_row">
                                <span class="form_l percentage_ico">Interest Rate </span>
                                <div class="f_field">
                                    <asp:TextBox ID="txtCalIntrestRate" runat="server" class="text" Width="80" MaxLength="5"></asp:TextBox>&nbsp;%
                                    <span class="indicator">
                                        <asp:RequiredFieldValidator ID="rfvCalIntrestRate" runat="server" ControlToValidate="txtCalIntrestRate"
                                            Display="Dynamic" CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revCalIntrestRate" runat="server" ControlToValidate="txtCalIntrestRate"
                                            CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"
                                            ValidationExpression="^[0-9]+(\.[0-9]{1,2})?$"></asp:RegularExpressionValidator>
                                    </span>
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="f_row">
                                <span class="form_l date_ico">Loan Duration</span>&nbsp;years
                                <div class="f_field">
                                    <asp:TextBox ID="txtCalLoanTenure" runat="server" class="text" Width="80" MaxLength="2"></asp:TextBox>
                                    <span class="indicator">
                                        <asp:RequiredFieldValidator ID="rfvCalLoanTenure" runat="server" ControlToValidate="txtCalLoanTenure"
                                            Display="Dynamic" CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revCalLoanTenure" runat="server" ControlToValidate="txtCalLoanTenure"
                                            CssClass="validationErrorControl" ErrorMessage="" ValidationGroup="calculator"
                                            ValidationExpression="^[0-9]+(\[0-9])?$"></asp:RegularExpressionValidator>
                                    </span>
                                </div>
                                <div class="clear">
                                </div>
                            </div>

                            <script type="text/javascript">
                                IncreaseProgress(90);
                            </script>

                            <div class="f_row">
                                <asp:Label ID="lblAboutYouAssumption" runat="server" CssClass="assumption"></asp:Label>
                            </div>
                            <div id="div1" style="display: none">
                                <table style="width: 100%;">
                                    <tr>
                                        <td align="center" valign="middle">
                                            <img src="../images/loading7.gif" id="img1" alt="Loading" width="30" height="20" />
                                            <span id="Span1">Please wait...</span>
                                        </td>
                                    </tr>
                                    <tr align="right">
                                        <td>
                                            <a id="A1" href="javascript:StopSubmit();">Cancel</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="f_row">
                                <asp:Label ID="lblSetInsMessage" Text="" Font-Size="12px" ForeColor="Green" Font-Bold="true"
                                    Font-Names="Arial" runat="server"></asp:Label>
                            </div>
                            <div class="f_row sr_button">
                                <asp:Button runat="server" ID="btnCalculate" onmousedown="this.className = 'button_submit_mousedown';"
                                    onmouseup="this.className = 'button_submit';" onmouseout="this.className = 'button_submit';"
                                    CssClass="button_submit" OnClick="btnCalculate_Click" OnClientClick="LoadValidationErrorCss();if (Page_ClientValidate('calculator')){this.removeAttribute('onmouseout');this.removeAttribute('onmouseup');this.className = 'button_processing';}"
                                    ValidationGroup="calculator" />
                                <br />
                                <asp:Label runat="server" ID="lblError" ForeColor="Red"></asp:Label>
                            </div>
                            <div class="seperator">
                            </div>
                            <div id="divResult" runat="server" visible="false">
                                <div class="row cal_result">
                                    <h2>
                                        Result</h2>
                                    <div class="row">
                                        <table cellpadding="2" cellspacing="2" border="0">
                                            <tr>
                                                <td style="width: 145px" align="left">
                                                    <b>Monthly Payment</b>
                                                </td>
                                                <td style="width: 5px" align="left">
                                                    :
                                                </td>
                                                <td style="width: 120px" align="left">
                                                    <asp:Label runat="server" ID="lblMonthlyPayment" Font-Bold="true"></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 145px" align="left">
                                                    Loan Amount
                                                </td>
                                                <td style="width: 5px" align="left">
                                                    :
                                                </td>
                                                <td style="width: 120px" align="left">
                                                    <asp:Label runat="server" ID="lblLoanAmount"></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 145px" align="left">
                                                    Intrest Rate
                                                </td>
                                                <td style="width: 5px" align="left">
                                                    :
                                                </td>
                                                <td style="width: 120px" align="left">
                                                    <asp:Label runat="server" ID="lblIntrestRate"></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 145px" align="left">
                                                    Loan Duration
                                                </td>
                                                <td style="width: 5px" align="left">
                                                    :
                                                </td>
                                                <td style="width: 120px" align="left">
                                                    <asp:Label runat="server" ID="lblLoanDuration"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    <div style="text-align: left; width: 100%;">
                        <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" OnClick="btnClose_Click" />
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
    <div style="width: 715px; border: 1px solid #d7f3ff; background: #f5fcff; padding: 15px;
        font-size: 0.95em; color: #878787;">
        <h3>
            <strong>Buying First Property? Investment? Second House? Refinancing?</strong></h3>
        Purchasing a home can be stressful especially when it comes to deciding the best
        mortgage deal. The home loan market in Singapore can be a confusing place for first
        time home buyers and experienced home owners alike. There is a great variety of
        products available to borrowers, and every lender offers different features for
        each type of mortgage they offer.
        <br />
        <br />
        Try our instant comparison home-loan tool, 3 simplest steps:
        <br />
        <br />
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td height="38" style="background: url(/images/icon/step1.png) no-repeat bottom left;
                    padding-left: 85px; color: #128dbe;">
                    <b>Answer not more than 5 simple questions</b>
                </td>
            </tr>
            <tr>
                <td height="2">
                </td>
            </tr>
            <tr>
                <td height="38" style="background: url(/images/icon/step2.png) no-repeat bottom left;
                    padding-left: 85px; color: #128dbe;">
                    <b>Compare up-to-date packages and select what interest you </b>
                </td>
            </tr>
            <tr>
                <td height="2">
                </td>
            </tr>
            <tr>
                <td height="38" style="background: url(/images/icon/step3.png) no-repeat bottom left;
                    padding-left: 85px; color: #128dbe;">
                    <b>Bank representatives will contact you within 1 working day </b>
                </td>
            </tr>
        </table>
        <br />
        <br />
        <h1>
            Compare various loan packages from major banks and financial institutions!</h1>
    </div>

    <script type="text/javascript">
        //<![CDATA[ 


        function ShowHideDiv(divName, varOnOff) {
            if (varOnOff) {
                document.getElementById(divName).style.display = "";
            }
            else {
                document.getElementById(divName).style.display = "none";
            }
        }

        function CheckValidationCurrentBank() {

            var _ddlMortgageType = document.getElementById('<%=ddlMortgageType.ClientID%>');
            //alert(_ddlMortgageType);
            //alert(_ddlMortgageType.value);
            if (_ddlMortgageType.value == 1) {
                ValidatorEnable(document.getElementById('<%=rfvYourCurrentBank.ClientID%>'), true);
            }
            else {
                ValidatorEnable(document.getElementById('<%=rfvYourCurrentBank.ClientID%>'), false);
            }
        }

        function CheckMortageType() {
            var _ddlMortgageType = document.getElementById('<%=ddlMortgageType.ClientID%>');
            //alert(_ddlMortgageType);
            //alert(_ddlMortgageType.value);
            if (_ddlMortgageType.value == 1) {
                document.getElementById('divYourCurrentBank').style.display = '';
            }
            else {
                document.getElementById('divYourCurrentBank').style.display = 'none';
            }

        }
        function CheckOptionValidationCss() {
            //CheckOffsetSchemesValidationCss();
            //CheckLockinValidationCss();
        }

        function CheckOffsetSchemesValidationCss() {
            var ctrlDivYes = 'divYesOffsetSchemes';
            var ctrlDivNo = 'divNoOffsetSchemes';
            var txtText = '<=txtOffsetSchemes.ClientID>';
            var valOffsetSchemes = '<=rfvOffsetSchemes.ClientID>';
            ShowValidationEffectOption(ctrlDivYes, ctrlDivNo, txtText, valOffsetSchemes);
            return true;
        }

        function CheckLockinValidationCss() {
            var ctrlDivYes = 'divYesLockin';
            var ctrlDivNo = 'divNoLockin';
            var txtText = '<=txtLockin.ClientID>';
            var valLockin = '<=rfvLockin.ClientID>';
            ShowValidationEffectOption(ctrlDivYes, ctrlDivNo, txtText, valLockin);
            return true;
        }

        function CheckOffsetSchemes() {
            var ctrlOffsetSchemes = document.getElementById('<=txtOffsetSchemes.ClientID>');
            var ctrlY = document.getElementById('<=rdoYesOffsetSchemes.ClientID>');
            var ctrlN = document.getElementById('<=rdoNoOffsetSchemes.ClientID>');
            var valOffsetSchemes = document.getElementById('<=rfvOffsetSchemes.ClientID>');
            if (ctrlY.checked == true || ctrlN.checked == true) {
                ctrlOffsetSchemes.value = '1';
                valOffsetSchemes.style.visibility = 'hidden';
            }
            else {
                ctrlOffsetSchemes.value = '';
            }
        }

        function CheckLockin() {
            var ctrlLockin = document.getElementById('<=txtLockin.ClientID>');
            var ctrlY = document.getElementById('<=rdoYesLockin.ClientID>');
            var ctrlN = document.getElementById('<=rdoNoLockin.ClientID>');
            var valLockin = document.getElementById('<=rfvLockin.ClientID>');
            if (ctrlY.checked == true || ctrlN.checked == true) {
                ctrlLockin.value = '1';
                valLockin.style.visibility = 'hidden';
            }
            else {
                ctrlLockin.value = '';
            }
        }
        function showhide(el) {
            el = document.getElementById(el);
            el.style.display = (el.style.display == "none") ? "block" : "none";
        }


        function formatThousandNumber(strNumber) {
            var strValue = strNumber;
            // reset comma
            while (strValue.indexOf(',') >= 0) {
                strValue = strValue.replace(',', '');
            }

            var regx = /(\d+)(\d{3})/;
            while (regx.test(strValue)) {


                strValue = strValue.replace(regx, '$1' + ',' + '$2');
            }

            document.getElementById('<%=lblLoanAmountDisplay.ClientID%>').innerHTML = "S$ " + strValue;
            //return strValue;
        }

        window.onload = function() {

        }


        IncreaseProgress(100);
        CheckMortageType();
        HideLoading();
        //]]> 
    </script>

</asp:Content>
